<template><!-- 公用右下方业务模块tab -->
   <div class="func-tab" id="isSrcollBottom" :class="hiddenLine">
     <div v-if="cdrCallInterfaceBtn && isCallInterfaceButton.status" class="call-ifrem-btn" @click="showCdrCallIframe"><i class="icon-duijie iconfont"></i></div>
     <div v-if="tabType === 'cdr_outbound' && isCallOutInterfaceButton.status" class="call-ifrem-btn" @click="showCdrCallIframe"><i class="icon-duijie iconfont"></i></div>
     <button class="config" @click="handleEditTab" v-if="isShowToolbar" :style="{right: (tabType === 'cdr_outbound' && isCallOutInterfaceButton.status) || (cdrCallInterfaceBtn && isCallInterfaceButton.status) ? '40px': '0px'}">
        <i class="iconfont icon-peizhi"></i>
     </button>
    <el-tabs v-model="activeTab" @tab-click="handleClick" class="func-tab-header" :class="{'twoWidth': (tabType === 'cdr_outbound' && isCallOutInterfaceButton.status) || (cdrCallInterfaceBtn && isCallInterfaceButton.status)}">
      <el-tab-pane v-for="(tabItem, index) in normalTabs" :key="index" :label="tabItem.labelName" :disabled="tabItem.disabled" :name="tabItem.slotName ? tabItem.name : tabItem._id" @scroll.native="businessScroll">
        <slot v-if="tabItem.slotName" :name="tabItem.slotName"></slot>
        <span v-if="!tabItem.slotName" slot="label">
          <span class="max-name">{{tabItem.name}}</span><i v-if="!tabItem.type" class="icon-duijie iconfont"  @click.stop="open(urlsStres,tabItem.name, index, tabItem.isEncode)"></i>
        </span>
        <slot v-if="!tabItem.slotName" :name="tabItem._id"></slot>
      </el-tab-pane>
      <!-- <el-tab-pane v-if="tabs.tabUrl" v-for= "(item, index) in tabUrls" :name="'item' + index" :key="index">
        <span slot="label"><span class="max-name">{{item.name}}</span><i class="icon-duijie iconfont"  @click.stop="open(urlsStres,item.name,index)"></i></span>
        <slot :name="'item' + index + 'Tab'"></slot>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
  import bus from '@/store/eventBus'
  function getToken (store) {
    return store.dispatch('getToken')
  }
  export default {
    name: 'FunTab',
    props: {
      tabs: Object,
      activeName: String,
      tabType: String,
      urlsStres: Array,
      isShowToolbar: {type: Boolean, default: false},
      hiddenLine: String,
      model: {type: String, default: ''},
      cdrCallInterfaceBtn: Boolean
    },
    data () {
      return {
        showBus: false,
        disabled: true,
        btn: false,
        popUrls: '',
        currentCustomer: {},
        tabUrls: this.$getCache('tabUrlAddress')
      }
    },
    computed: {
      activeTab: {
        get () {
          return this.activeName || 'plan'
        },
        set (v) {
          // this.activeName = v || 'plan'
        }
      },
      normalTabs () {
        return this.tabs.normalTab
      },
      isCallInterfaceButton () {
        return this.$store.state.isCallInterfaceButton
      },
      isCallOutInterfaceButton () {
        return this.$store.state.isCallOutInterfaceButton
      }
    },
    methods: {
      handleClick (tab, event) {
        this.$emit('changeDetailTab', tab.name)
        if (tab.name === 'business') {
          this.showBus = true
        }
      },
      handleEditTab () {
        this.$emit('handleEditTab')
      },
      businessScroll (e) {
        if (this.model === 'business') {
          let fixed = ''
          if (e.currentTarget.scrollTop > 50) {
            fixed = 'header-fixed'
          } else {
            fixed = ''
          }
          this.$emit('businessScroll', fixed)
        }
      },
      open (url, name, index, isEncode) {
        if (this.btn === false) {
          this.btn = true
        }
        let tabUrles = this.normalTabs
        if (tabUrles && tabUrles.length > 0) {
          if (this.$store.state.session.account.tokenCheck) {
            getToken(this.$store).then((token) => {
              let newUrl = url[index]
              if (this.$store.state.session.account.tokenCheck) {
                if (newUrl.indexOf('token')) {
                  newUrl = newUrl.replace(/(?![?&])(token)=\w+/gi, 'token=' + (token.token || ''))
                }
                if (newUrl.indexOf('tokenId')) {
                  // newUrl = newUrl.replace(/(?![?&])(tokenId)=\w+/gi, 'token=' + (token.tokenId || ''))
                  newUrl = newUrl.replace(/(?![?&])(tokenId)=([A-Za-z0-9|-]+)/gi, 'tokenId=' + (token.tokenId || ''))
                }
              }
              if (isEncode) {
                newUrl = encodeURI(newUrl)
              }
              let dragMess = {url: newUrl, name: name, open: true}
              this.$store.commit('SET_DRAGPOP', dragMess)
            })
          } else {
            let newUrl = url[index]
            if (isEncode) {
              newUrl = encodeURI(newUrl)
            }
            let dragMess = {url: newUrl, name: name, open: true}
            this.$store.commit('SET_DRAGPOP', dragMess)
          }
        }
      },
      showCdrCallIframe () {    //   显示 来电弹屏
        let page = document.getElementById('call_interface_wrap')
        let outPage = document.getElementById('call_out_interface_wrap')
        if (this.tabType === 'cdr_outbound' && outPage) {
          outPage.style.display = 'block'
          outPage.classList.add('transIn')
          bus.$emit('callOutIframeGoLeft')
        } else {
          if (page) {
            page.style.display = 'block'
            page.classList.add('transIn')
            bus.$emit('callIframeGoLeft')
          }
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
.func-tab
  position relative
  &:before
    content ''
    height 1px
    width calc(100% + 40px)
    background #ccc
    position absolute
    top 35px
    left -20px
    z-index 1
    box-shadow 0 0 4px 0 rgba(0,0,0,0.1), 0 2px 8px 0 rgba(170,182,206,0.2), inset 0 -1px 0 0 rgba(255,255,255,0.2)
  span
    display inline-block
    margin-top -3px
    .icon-duijie
      cursor pointer
      margin-left 6px
      color $cf-level2
      font-weight normal  
  .is-active
    .icon-duijie
      color $c-main
  .call-ifrem-btn
    cursor pointer
    z-index 1
    position absolute
    right 0px
    top 0px
    background-color #459ae9
    height 22px
    width 24px
    text-align center
    line-height 22px
    :after
      border solid transparent
      content ''
      height 0
      right 100%
      position absolute
      width 0
      border-width 11px
      border-right-color #459ae9
    i
      color #fff
      font-size 14px
.func-tab.hide-line
  &:before
    height 0
.max-name
  max-width 5em
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
  display inline-block
  vertical-align bottom
.config
  border none
  cursor pointer
  position absolute
  right 0px
  top 5px
  z-index 1
</style>
<style lang="stylus">
.func-tab
  .el-tabs__header
    margin-right 40px
.twoWidth
  .el-tabs__nav-wrap
    width 96%  
</style>